import PropsTest from "./PropsTest";
import BaseLayout from './BaseLayout.vue';
import { defineComponent } from "vue";

export default defineComponent({
    data() {
        return {
            count: 1
        };
    },
    methods: {
        btnClick() {
            this.count++;
        },
        propsTestClickHandler(input: string) {
            alert(this.count + ' ' + input);
        }
    },
    render() {
        return (
            <div style={{ backgroundColor: "#eebbff" }}>
                <span>使用JSX语法的Js组件：{this.count}</span>
                <input type="button" value="点击" onClick={this.btnClick} />
                <PropsTest msg="属性值1" />
                <PropsTest msg="属性值" onMyClick={this.propsTestClickHandler} />
                <BaseLayout>
                    {{
                        header: ()=>'这是头部',
                        default: (props: { scopUser: string, scopIndex: number }) => (<span>这是内容，用户为{props.scopUser}，索引为{props.scopIndex}</span>),
                        footer: ()=>'这是尾部'
                    }}
                </BaseLayout>
            </div>
        );
    }
})